<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>萤火商城-商业版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/common/i/favicon.ico"/>
    <meta name="apple-mobile-web-app-title" content="萤火商城-商业版"/>
    <link rel="stylesheet" href="Css/amazeui.min.css"/>
    <link rel="stylesheet" href="Css/app.css"/>
    <link rel="stylesheet" href="Css/font_783249_3hfdb7m5w0j.css">
    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/api.js"></script>
    <script src="Scripts/func.js"></script>
    <script src="Scripts/font_783249_e5yrsf08rap.js"></script>

    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

    <script>
        BASE_URL = 'https://demo.yiovo.com/';
        STORE_URL = 'index.php?s=/store';
    </script>
</head>

<body data-type="">
<div class="am-g tpl-g">

    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">基本信息</div>
                                <input hidden="hidden" name="id">
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品名称 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="goods.goods_name"
                                           value="" required>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品分类 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select id="parentId" name="goods.category_id" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择商品分类', maxHeight: 400}">
                                        <option value="0">请选择商品分类</option>
                                    </select>
                                    <!--<small class="am-margin-left-xs">-->
                                    <!--<a href="index.php?s=/store/goods.category/add">去添加</a>-->
                                    <!--</small>-->
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品状态 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="goods.goods_status" value="10" data-am-ucheck
                                               checked>
                                        上架
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="goods.goods_status" value="20" data-am-ucheck>
                                        下架
                                    </label>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品图片 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <div class="am-form-file">
                                        <div class="am-form-file">
                                            <input name="file" id="imagefile" type="file" accept="image/*"
                                                   onchange="selectImage(this);" class="imageButton"/>
                                            <button class="upload-file am-btn am-btn-secondary am-radius"
                                                    type="button">
                                                <i class="am-icon-cloud-upload"></i> 选择图片
                                            </button>
                                        </div>

                                        <div class="uploader-list am-cf" id="images">

                                        </div>
                                        <div class="help-block am-margin-top-sm">
                                            <small>尺寸750x750像素以上，大小2M以下 (可拖拽图片调整显示顺序 )</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--<div class="am-form-group">-->
                            <!--<label class="am-u-sm-3 am-u-lg-2 am-form-label">商品卖点 </label>-->
                            <!--<div class="am-u-sm-9 am-u-end">-->
                            <!--<input type="text" class="tpl-form-input" name="goods.selling_point" value="">-->
                            <!--<small>选填，商品卖点简述，例如：此款商品美观大方 性价比较高 不容错过</small>-->
                            <!--</div>-->
                            <!--</div>-->

                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">规格/库存</div>
                            </div>


                            <!-- 商品单规格 -->
                            <div class="goods-spec-single">
                                <!--<div class="am-form-group">-->
                                <!--<label class="am-u-sm-3 am-u-lg-2 am-form-label">商品编码 </label>-->
                                <!--<div class="am-u-sm-9 am-u-end">-->
                                <!--<input type="text" class="tpl-form-input" name="goodsSpec.goods_no"-->
                                <!--value="">-->
                                <!--</div>-->
                                <!--</div>-->
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品批发价 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <input type="number" class="tpl-form-input" name="goodsSpec.goods_price"
                                               required>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label">商品零售价 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <input type="number" class="tpl-form-input" name="goodsSpec.line_price">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label">商品返现折扣</label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <input type="number" class="tpl-form-input" name="royalty.royalty_price">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品排序 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <input type="number" class="tpl-form-input" name="goods.goods_sort"
                                               value="100" required>
                                        <small>数字越小越靠前</small>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">当前库存数量 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <input type="number" class="tpl-form-input" name="goodsSpec.stock_num"
                                               required>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品重量(Kg) </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <input type="number" class="tpl-form-input" name="goodsSpec.goods_weight"
                                               required>
                                    </div>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">库存计算方式 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="goods.deduct_stock_type" value="10" data-am-ucheck>
                                        下单减库存
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="goods.deduct_stock_type" value="20" data-am-ucheck
                                               checked>
                                        付款减库存
                                    </label>
                                </div>
                            </div>

                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">商品详情</div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品详情 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <!-- 加载编辑器的容器 -->
                                    <textarea id="container" name="goods.selling_point" type="text/plain"></textarea>
                                </div>
                            </div>


                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button onclick="postData()" type="button" class="am-btn am-btn-secondary">提交
                                    </button>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 图片文件列表模板 -->
<script id="tpl-file-item" type="text/template">
    {{ each list }}
    <div class="file-item">
        <a href="{{ $value.file_path }}" title="点击查看大图" target="_blank">
            <img src="{{ $value.file_path }}">
        </a>
        <input type="hidden" name="{{ name }}" value="{{ $value.file_id }}">
        <i class="iconfont icon-shanchu file-item-delete"></i>
    </div>
    {{ /each }}
</script>

<!-- 文件列表模板 -->
<script id="tpl-file-list" type="text/template">
    <ul class="file-list-item">
        {{ include 'tpl-file-list-item' data }}
    </ul>
    {{ if last_page > 1 }}
    <div class="file-page-box am-fr">
        <ul class="pagination">
            {{ if current_page > 1 }}
            <li>
                <a class="switch-page" href="javascript:void(0);" title="上一页" data-page="{{ current_page - 1 }}">«</a>
            </li>
            {{ /if }}
            {{ if current_page < last_page }}
            <li>
                <a class="switch-page" href="javascript:void(0);" title="下一页" data-page="{{ current_page + 1 }}">»</a>
            </li>
            {{ /if }}
        </ul>
    </div>
    {{ /if }}
</script>


<script>

    var refreshCategory = function (parents) {
        var str = "";
        for (var i = 0; i < parents.length; i++) {
            str += ('<option value="' + parents[i].id + '">' + parents[i].name + '</option>');
            if (parents[i].nodes)
                for (var j = 0; j < parents[i].nodes.length; j++)
                    str += ('<option value="' + parents[i].nodes[j].id + '">&nbsp;&nbsp;|-' + parents[i].nodes[j].name + '</option>');
        }
        console.log(str)
        $("#parentId").append(str);

    }

    var files = []

    var templet_image = ' <div class="file-item" id="{1}"><a href="{0}" title="点击查看大图" target="_blank"><img src="{0}"></a>\n' +
        '<i class="iconfont icon-shanchu file-item-delete" onclick=\'removeImage("{1}")\'></i></div>'
    var refreshImage = function (data) {
        $("#images").append(StringFormat(templet_image, data.url, data.id))
        files.push(data.id)
    }

    function selectImage(src) {
        var data = new FormData()
        data.append("file", src.files[0])
        uploadFile(data, refreshImage)

    }

    var refreshForm = function (data) {
        if (data) {
            $('input[name="id"]').val(data.goods.id);
            $('input[name="goods.goods_name"]').val(data.goods.goods_name);

            $('select[name="goods.category_id"] option[value="' + data.goods.category_id + '"]').attr("selected", "selected");
            $("select").trigger('changed.selected.amui');

            $(':radio[name="goods.goods_status"][value="' + data.goods.goods_status + '"]').prop("checked", "checked");


            // $('input[name="goods.selling_point"]').val(data.goods.selling_point);
            ue.addListener("ready", function () {
                ue.setContent(data.goods.selling_point);
            });


            $('input[name="goods.goods_sort"]').val(data.goods.goods_sort);
            $('input[name="goods.content"]').val(data.goods.content);
            // $('input[name="goodsSpec.goods_no"]').val(data.goodsSpec.goods_no);
            $('input[name="goodsSpec.line_price"]').val(data.goodsSpec.line_price);
            $('input[name="goodsSpec.goods_price"]').val(data.goodsSpec.goods_price);
            $('input[name="goodsSpec.stock_num"]').val(data.goodsSpec.stock_num);
            $('input[name="goodsSpec.goods_weight"]').val(data.goodsSpec.goods_weight);
            if (data.royalty)
                $('input[name="royalty.royalty_price"]').val(data.royalty.royalty_price);
            $(':radio[name="goods.deduct_stock_type"][value="' + data.goods.deduct_stock_type + '"]').prop("checked", "checked");
            for (var i = 0; i < data.goodsImageList.length; i++) {
                $("#images").append(StringFormat(templet_image, data.goodsImageList[i].image, data.goodsImageList[i].id))
                files.push(data.goodsImageList[i].id)
            }
        }
    }


    function initData() {
        getLevel(refreshCategory)
        var id = getQueryString("id");
        if (id) {
            var data = {
                "id": id
            };
            getGood(data, refreshForm);
        }
    }

    function postData() {
        var content;
        ue.addListener("ready", function () {
            content = ue.getContent();
        });
        if(content) {
            var data = {
                "goods": {
                    "id": $('input[name="id"]').val(),
                    "goods_name": $('input[name="goods.goods_name"]').val(),
                    "category_id": $('select[name="goods.category_id"]').val(),
                    "goods_status": $('input[name="goods.goods_status"]:checked').val(),
                    "selling_point": content,
                    "goods_sort": $('input[name="goods.goods_sort"]').val(),
                    // "content": $('input[name="goods.content"]').val(),
                    "deduct_stock_type": $('input[name="goods.deduct_stock_type"]:checked').val()
                },
                "goodsSpec": {
                    // "goods_no": $('input[name="goodsSpec.goods_no"]').val(),
                    "line_price": $('input[name="goodsSpec.line_price"]').val(),
                    "goods_price": $('input[name="goodsSpec.goods_price"]').val(),
                    "stock_num": $('input[name="goodsSpec.stock_num"]').val(),
                    "goods_weight": $('input[name="goodsSpec.goods_weight"]').val()
                },
                "royalty": {
                    "royalty_price": $('input[name="royalty.royalty_price"]').val()

                }
            }
            var img = []
            for (var i = 0; i < files.length; i++) {
                img.push({"image": files[i]})
            }
            data["goodsImageList"] = img;
            console.log(JSON.stringify(data))
            addGoods(data)
        }else
            layer.alert("商品详情不可为空！")


    }

    function removeImage(id) {
        var index = files.indexOf(id);
        if (index > -1)
            files.slice(index, 1)
        $("#" + id).remove()
    }

    var ue;
    $(function () {

        ue = UE.getEditor('container');
        // 富文本编辑器
        initData();


        // 图片列表拖动
        $('.uploader-list').DDSort({
            target: '.file-item',
            delay: 100, // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
            floatStyle: {
                'border': '1px solid #ccc',
                'background-color': '#fff'
            }
        });
    })
</script>

<script src="Scripts/layer.js"></script>
<script src="js/ddsort.js"></script>
<script src="Scripts/jquery.form.min.js"></script>
<script src="Scripts/amazeui.min.js"></script>
</body>

</html>
